import React from 'react';
import {Card, Tooltip, Typography, Row, Col, Spin} from 'antd';
import {QuestionCircleOutlined} from '@ant-design/icons';
import {numberHandle} from '~/utils/number';
import useGetData from '../common/useGetData';

const {Title} = Typography;

const FirstTwoCard = props => {
    const {
        defaultTitle = [],
        tooltip = [],
        dashBoard: {dashBoardId} = {},
        unitId,
        dimensionAndValues = []
    } = props;

    const {data, loading} = useGetData({...props, isMountQuery: true});

    const [defaultTitle1 = '', defaultTitle2 = ''] = defaultTitle;
    const [tooltip1 = '', tooltip2 = ''] = tooltip;
    const unit1 = dashBoardId ? data?.[dashBoardId]?.[unitId[0]] : {};
    const unit2 = dashBoardId ? data?.[dashBoardId]?.[unitId[1]] : {};

    const name1 = unit1?.unitName ?? '';
    const name2 = unit2?.unitName ?? '';

    const cardValues1 = unit1?.cardValues ?? [];
    const cardValues2 = unit2?.cardValues ?? [];

    const [{value: value1 = 0} = {}] = cardValues1;
    const [{value: value2 = 0} = {}] = cardValues2;

    return (
        <>
            <Col span={8}>
                <Card style={{margin: '4px 0'}}>
                    <Row style={{alignItems: 'center'}}>
                        <Col style={{flex: '1'}}>
                            <Title
                                level={5}
                                style={{color: '#888', margin: '0'}}
                            >
                                {name1 || defaultTitle1}
                            </Title>
                        </Col>
                        <Col style={{flex: '0'}}>
                            <Tooltip title={tooltip1}>
                                <QuestionCircleOutlined
                                    style={{color: '#888'}}
                                />
                            </Tooltip>
                        </Col>
                    </Row>
                    <Spin spinning={loading}>
                        <Title style={{margin: '15px 0 0'}}>
                            {numberHandle(value1, 2)}
                        </Title>
                    </Spin>
                </Card>
            </Col>
            <Col span={8}>
                <Card style={{margin: '4px 0'}}>
                    <Row style={{alignItems: 'center'}}>
                        <Col style={{flex: '1'}}>
                            <Title
                                level={5}
                                style={{color: '#888', margin: '0'}}
                            >
                                {name2 || defaultTitle2}
                            </Title>
                        </Col>
                        <Col style={{flex: '0'}}>
                            <Tooltip title={tooltip2}>
                                <QuestionCircleOutlined
                                    style={{color: '#888'}}
                                />
                            </Tooltip>
                        </Col>
                    </Row>
                    <Spin spinning={loading}>
                        <Title style={{margin: '15px 0 0'}}>
                            {numberHandle(value2, 2)}
                        </Title>
                    </Spin>
                </Card>
            </Col>
        </>
    );
};

export default FirstTwoCard;
